<template>
  <Card dis-hover>
    <Row :gutter="16" style="margin-bottom: 15px;">
      <Col span="8" v-if="isSearch">
      <Input placeholder="输入关键字搜索" clearable class="search-input" v-model="keywords" @on-enter="handleSearch" @on-clear="handleSearch" />
      </Col>
      <Col span="4" v-if="selectArray&&selectArray.data&&selectArray.data.length>0">
      <Select :placeholder="selectArray.placeholder" v-model="selectKey" @on-change="handleSearch">
        <Option value="">全部</Option>
        <Option v-for="item in selectArray.data" :value="item.value" :key="item.value">{{item.label}}</Option>
      </Select>
      </Col>
      <Col v-if="isSearch" :span="selectArray&&selectArray.data&&selectArray.data.length>0 ? 8 : 12">
      <Button class="search-btn" type="primary" @click.native="handleSearch">
        <Icon type="ios-search" /> 搜索</Button>
      </Col>
      <Col span="4" style="text-align: right;" v-if="addBtn&&addBtn.show">
      <Button class="search-btn" @click.native="handleSearch" :to="addBtn.to">
        <Icon type="ios-add" /> {{ addBtn.name }}</Button>
      </Col>
    </Row>
    <Table :size="size" :max-height="maxHeight" ref="tableCommon" :loading="tableLoading" :data="tableData" :columns="columns"
      @on-filter-change="handleSearch"
      @on-select="handleSelectClick"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectClickAll"
      @on-select-all-cancel="handleSelectCancelAll"/>
    <div style="margin-top: 15px;">
      <Page :page-size="pageData.per_page" :total="pageData.total" :current="pageData.current_page" show-sizer :page-size-opts="[10]" size="small"
        @on-change="changePage" @on-page-size-change="changPageSize" />
    </div>
  </Card>
</template>

<script>
  export default {
    name: 'table-common',
    props: {
      tableData: {
        type: Array,
        default () {
          return []
        }
      },
      columns: {
        type: Array,
        default () {
          return []
        }
      },
      selectArray: {
        type: Object,
        default () {
          return {}
        }
      },
      pageData: {
        type: Object,
        default () {
          return {}
        }
      },
      tableLoading: {
        type: Boolean,
        default: false
      },
      addBtn: {
        type: Object,
        default () {
          return {}
        }
      },
      isSearch: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: 'small'
      },
      filterParams: Object,
      maxHeight:[Number,String]
    },
    // watch: {
    //   filterParams: {
    //     handler(newV, oldV) {
    //       console.log(newV)
    //     },
    //     deep: true
    //   }
    // },
    data() {
      return {
        keywords: '',
        selectData: {},
        selectKey: '',
        page: '',
        pageSize: '',
      }
    },
    methods: {
      handleSearch() {
        let params = {}
        if (this.keywords != '') {
          params['keyword'] = this.keywords
        }
        if (this.selectKey != '') {
          params[this.selectData.key] = this.selectKey
        }
        if (this.page != '') {
          params['page'] = this.page
        }
        if (this.pageSize != '') {
          params['pageSize'] = this.pageSize
        }
        if (this.pageSize != '') {
          params['pageSize'] = this.pageSize
        }

        if (this.filterParams != null) {
          Object.assign(params, this.filterParams);
        }

        this.$emit('handleGetData', params);
      },
      changePage(page) {
        this.page = page
        this.handleSearch();
      },
      changPageSize(pageSize) {
        this.pageSize = pageSize
        this.handleSearch();
      },
      handleSelectClick(selection, row) {
      	var params = {
      		selection: selection,
      		row: row
      	};
      	this.$emit('handleSelectClick', params);
      },
      handleSelectCancel(selection, row) {
      	var params = {
      		selection: selection,
      		row: row
      	};
      	this.$emit('handleSelectCancel', params);
      },
      handleSelectClickAll(selection) {
      	var params = {
      		selection: selection
      	};
      	this.$emit('handleSelectClickAll', params);
      },
      handleSelectCancelAll(selection) {
      	var params = {
      		selection: selection
      	};
      	this.$emit('handleSelectCancelAll', params);
      },
    },
    mounted() {
      this.selectData = this.selectArray;
    }
  }
</script>

<style>
</style>
